<template>
  <div class="login-container" >
    <!-- 返回导航栏 -->
    <van-nav-bar title="返回" left-arrow @click-left="doReturnPage" style="margin-bottom: 20px"/>

    <!-- 标题图片 -->
    <div class="image-wrapper">
      <van-image
          fit="contain"
          position="center"
          width="280px"
          src="https://javawebprogram.oss-cn-beijing.aliyuncs.com/0bccf4e6-d60d-4dae-b89c-6847c0a04935.jpg"
      />
    </div>

    <!-- 登录标题 -->
    <h1 class="login-title">登录</h1>

    <!-- 登录表单 -->
    <van-form @submit="onSubmit" class="login-form" >
      <van-cell-group inset>
        <van-field
            ref="accountField"
            v-model="userAccount"
            name="userAccount"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '账号不能为空' }]"
            left-icon="manager-o"
        />
        <van-field
            v-model="userPassword"
            type="password"
            name="userPassword"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '密码不能为空' }]"
            left-icon="flower-o"
        />
      </van-cell-group>

      <van-button round block type="primary" native-type="submit" class="submit-btn">
        登录
      </van-button>

      <div class="register-link">
        <van-button type="default" size="small" round text="还没账号？ 点击注册" @click="goToRegister" />
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showFailToast, showSuccessToast } from 'vant'
import 'vant/lib/index.css'
import { userLogin } from '../../api/User.ts'

const route = useRoute()
const router = useRouter()

const userAccount = ref('')
const userPassword = ref('')
const accountField = ref() // 输入框引用

/**
 * 组件挂载时
 */
onMounted(() => {
})

/**
 * 登录
 */
const onSubmit = async () => {
  const result = await userLogin(userAccount.value, userPassword.value)
  // @ts-ignore
  if (result.code === 0 && result.data) {
    showSuccessToast('登录成功')
    const redirectUrl = route.query?.redirect as string ?? '/'
    window.location.href = redirectUrl
  } else {
    // @ts-ignore
    showFailToast('登录失败,' + (result.description ? `${result.description}` : ''))
  }
}

/**
 * 返回主页
 */
const doReturnPage = () => {
  router.push('/')
}

/**
 * 跳转注册页
 */
const goToRegister = () => {
  router.push('/user/register')
}
</script>

<style scoped>
.login-container {
  background-color: #f9f9f9;
  color: #333;
  transition: all 0.3s ease;
}

.image-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.login-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: #333333;
  font-family: "楷体", sans-serif;
  margin-bottom: 20px;
  transition: color 0.3s ease;
}


.login-form {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 20px;
  transition: background-color 0.3s ease;
}

.submit-btn {
  margin-top: 20px;
}

.register-link {
  text-align: right;
  margin-top: 20px;
}

</style>

